

<template>
  <el-form style="width: 500px ; margin: 0 auto;" label-width="80px" >
    <el-form-item   v-for="i in form" :label="i.title">
      <el-input :placeholder="i.define" v-model="i.value"></el-input>
      <h1>{{i.value}}</h1>
      <h3>{{user.username}}</h3>
      <h3>{{user.password}}</h3>
    </el-form-item>
<!--    <el-form-item label="用户名">-->
<!--      <el-input :placeholder="请输入用户名" v-model="user.username" ></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="密码">-->
<!--      <el-input :placeholder="请输入密码" v-model="user.password" ></el-input>-->
<!--    </el-form-item>-->
    <el-form-item  label="性别">
      <el-radio-group v-model="user.gender">
        <el-radio-button label="男" value="0"></el-radio-button>
        <el-radio-button label="女" value="1"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item  label="所在地">
      <el-select v-model="user.address">
        <el-option  label="北京" value="bj"></el-option>
        <el-option  label="重庆" value="cj"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="管理员">
      <el-switch v-model="user.admin" ></el-switch>
    </el-form-item>

    <el-form-item label="提交表单">
      <el-button @click="submit"></el-button>
    </el-form-item>

  </el-form>

</template>

<script setup>
  import {ref} from "vue";
  const user = ref({

    username:'',
    password:'',
    gender:'',
    address:'',
    admin:true,
  });



  const form = ref([
      {title:"用户名",define:"请输入用户名" ,value:''},
      {title:"密码",define:"请输入密码,",value:''},
  ])
  const submit = ()=>{


    console.log(user.value);
  }

  const city=ref([
    {name:"北京",T:29},
    {name:"重庆",T:39},
    {name:"长春",T:33},
    {name:"武汉",T:35},
    {name:"上海",T:49}
  ]);

</script>

<style scoped>

</style>